<template>
  <div class="region-select">
    <nav-back :to="{name:'home'}" />
    <city-with-weather
      v-for="v in cities"
      :key="v.adcode"
      :city="v"
      :handleUpdate="handleUpdate"
      :handleDelete="deleteCity"
    />
    <button-comp
      class="add-btn"
      text="+ 添加城市"
      center
      @click.native="navToSearch"
    />
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex'
import { NavBack, ButtonComp } from '@/components'
import CityWithWeather from './CityWithWeather'

export default {
  name: 'region-select',
  components: { NavBack, ButtonComp, CityWithWeather },
  computed: { ...mapState('Region', ['cities']) },
  methods: {
    ...mapActions('Region', ['searchRegion']),
    ...mapMutations('Region', ['updateCurrCity', 'deleteCity']),
    navToSearch() {
      this.$router.push({ name: 'region-add' })
    },
    handleUpdate(city) {
      this.updateCurrCity(city)
      this.$router.replace({ name: 'home' })
    }
  }
}
</script>

<style lang="stylus" scoped>
.region-select {
  background-color: #fff;

  .add-btn {
    margin-top: 30px;
  }
}
</style>
